{{ define "css"}}
<style type="text/css">
    body {background: #e5e5e5;}
</style>
{{ end }}

{{define "content"}}
<div class="container" style="padding: 1.5rem 0rem;">
    <div class="box">
        <div class="columns is-multiline is-mobile">
        {{range .courses}}
            <div class="column is-12-mobile is-4-tablet is-3-desktop">
                <div class="card">
                    <div class="card-image">
                        <figure class="image is-3by2">
                            <a href="/courses/{{.Slug}}">
                            <img src="{{.CoverUrl}}" alt="{{.Name}}">
                            </a>
                        </figure>
                    </div>
                    <div class="card-content">
                        <div class="media">
                            <div class="media-content">
                                <p class="title is-6">
                                    <a href="/courses/{{.Slug}}">{{.Name}}</a>
                                </p>
                            </div>
                        </div>
                        <div class="content">
                            {{if eq .UpdateStatus 1}}
                                <span class="tag is-info">预告</span>
                            {{else if eq .UpdateStatus 2}}
                                <span class="tag is-warning">更新中</span>
                            {{else if eq .UpdateStatus 3}}
                                <span class="tag is-success">已完结</span>
                            {{end}}

                            <a class="button is-small is-link is-hovered is-pulled-right" href="/courses/{{.Slug}}">查看课程</a>
                        </div>
                    </div>
                </div>
            </div>
        {{end}}
        </div>
        <nav class="pagination is-rounded" role="navigation" aria-label="pagination">
            {{.pages}}
        </nav>
    </div>
</div>
{{end}}

{{ define "js"}}
{{ end }}